<template>
  <Dialog title="选择仓库" v-model="dialogVisible" :appendToBody="true" :scroll="true" width="500">
    <div class="search-bar" style="display: flex; margin-bottom: 15px">
      <el-input
        v-model="queryParams.keyword"
        placeholder="请输入仓库编号/名称"
        clearable
        @keyup.enter="handleQuery"
        style="flex: 1; margin-right: 10px"
      />
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </div>

    <el-table
      border
      :data="list"
      highlight-current-row
      @current-change="handleSelectionChange"
      style="width: 100%"
    >
      <!-- 单选列 -->
    <el-table-column width="50" align="center">
        <template #default="{ row }">
         <el-radio 
  :model-value="currentRowId" 
  :label="row.id"
  class="hidden-label-radio"
>
  <!-- 用空内容覆盖默认 label 显示 -->
</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="warehouseCode" label="仓库编号" min-width="120" sortable align="center" />
      <el-table-column prop="warehouseName" label="仓库名称" min-width="140" align="center" />
    </el-table>
    
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button 
        type="primary" 
        @click="saveSelection"
        :disabled="!currentRowId"
      >
        保 存
      </el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'

// 静态仓库数据
const staticWarehouses = [
  { id: 1, warehouseCode: 'WH001', warehouseName: '广州中央仓库' },
  { id: 2, warehouseCode: 'WH002', warehouseName: '深圳福田仓库' },
  { id: 3, warehouseCode: 'WH003', warehouseName: '上海浦东仓库'},
  { id: 4, warehouseCode: 'WH004', warehouseName: '北京朝阳仓库' },
  { id: 5, warehouseCode: 'WH005', warehouseName: '杭州西湖仓库'},
  { id: 6, warehouseCode: 'WH006', warehouseName: '成都武侯仓库'},
  { id: 7, warehouseCode: 'WH007', warehouseName: '重庆渝北仓库'},
  { id: 8, warehouseCode: 'WH008', warehouseName: '武汉江夏仓库' },
  { id: 9, warehouseCode: 'WH009', warehouseName: '南京玄武仓库' },
]

const list = ref([])
const total = ref(0)
const loading = ref(false)
const dialogVisible = ref(false)
const currentRowId = ref<number | null>(null)  // 当前选中的仓库ID
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  keyword: ''  // 统一搜索关键字
})

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  currentRowId.value = null
  await nextTick()
  resetQuery()
}

/** 处理单选 */
const handleSelectionChange = (row) => {
  if (row) {
    currentRowId.value = row.id
  }
}

/** 提交选择 */
const emits = defineEmits<{
  (e: 'success', value: any): void
}>()

const saveSelection = () => {
  if (currentRowId.value) {
    const selected = list.value.find(item => item.id === currentRowId.value)
    if (selected) {
      emits('success', selected)
    }
  }
  dialogVisible.value = false
}

/** 加载仓库列表 */
const getList = async () => {
  loading.value = true
  
  // 使用静态数据
  const keyword = queryParams.keyword.toLowerCase().trim()
  
  // 过滤数据
  let filteredData = staticWarehouses.filter(item => {
    const matchCode = item.warehouseCode.toLowerCase().includes(keyword)
    const matchName = item.warehouseName.toLowerCase().includes(keyword)
    return matchCode || matchName
  })
  
  // 分页
  const start = (queryParams.pageNo - 1) * queryParams.pageSize
  const end = queryParams.pageNo * queryParams.pageSize
  list.value = filteredData.slice(start, end)
  total.value = filteredData.length
  
  loading.value = false
}

/** 重置搜索 */
const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.pageNo = 1
  getList()
}

/** 搜索操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 在组件挂载时也可以调用一次获取数据
getList()

defineExpose({ open })
</script>

<style scoped>
.hidden-label-radio :deep(.el-radio__label) {
  display: none !important;
  width: 0;
  padding: 0;
}
</style>
